<!doctype html>
<html class="no-js">

	<head>
		<meta charset="utf-8">
		<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="description" content="">
		<meta name="keywords" content="">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
		<title>News Content</title>
		<meta name="renderer" content="webkit">
		<meta http-equiv="Cache-Control" content="no-siteapp" />
		<link rel="stylesheet" href="css/amazeui.min.css">
		<link rel="stylesheet" href="css/app.css">
	</head>

	<body>
		<div class="am-g">
			<div class="myArticle">
				<div class="myArticleHeadImg">
					<div class="myArticGoBack"><img class="am-header-icon-custom" src="data:image/svg+xml;charset=utf-8,&lt;svg xmlns=&quot;http://www.w3.org/2000/svg&quot; viewBox=&quot;0 0 12 20&quot;&gt;&lt;path d=&quot;M10,0l2,2l-8,8l8,8l-2,2L0,10L10,0z&quot; fill=&quot;%23fff&quot;/&gt;&lt;/svg&gt;" alt="" /></div>
					<div class="myArticleIco"><img id="touxiangimg" src="" alt=""></div>
					<img src="img/a9.jpg">
				</div>
				<div class="myArticleName">

				</div>
				<div class="myArticleTitle">
				</div>
				<div class="myArticleTime">
				</div>
			</div>
			<article data-am-widget="paragraph" class="myArticleText am-paragraph am-paragraph-default" data-am-paragraph="{ tableScrollable: true, pureview: true }">

				<p class="myArticlecontent">On the occasion of the last Stockholm Furniture Fair which has just closed its doors in Sweden, Carl Hansen announced the launching of production of two "new" models by Hans J. Wegner. The CH22 lounge chair, which marked the beginning of their long standing collaboration between the designer and Carl Hansen in the fifties, as well as the dining chair CH26, which was never put into production until today. This is an earlier model that has a lot of stylistic similarity with th.</p>
				<img id="contentimg" src="" />
				<!--<p class="myArticlecontent">As usual with the creations of the famous Danish furniture manufacturer, the attention to details and balance of the construction is delightful.</p>-->
				<!--<p class="myArticlecontent">The CH22 and CH26 will be available in oak, walnut or a combination of both with multiple finishes, starting from summer 2016.</p>-->
			</article>
			<div class="myArticleComment">
				<div class="myArticleCommentInput">
					<div class="myArticleCommentInputTitle">
						<div class="commentNum">评论</div>
						<div class="commentShow">显示/隐藏评论<i class="am-icon-caret-down"></i></div>
					</div>
					<div class="myArticleInput">
						<div class="myArticleInputLeft"><img id="usertouxiang" src=""></div>
						<div id="box" class="myArticleInputRight"><input id="content" type="text"></div>
					</div>
				</div>
				<div class="myArticleCommentList">
					<ul id="father">
						<li>
							<dl class="myArticleCommentListLeft">
								<dt><img class="userimg" src="" alt=""></dt>
								<dd>
									<span class="username"></span>
									<i class="time"></i>
								</dd>
							</dl>
							<dl id="" class="myArticleCommentListRight">
								<dt><i class="am-icon-heart-o zan" style="color:#BCC0C8;"></i><span class="num">1</span></dt>
								<dd><i class="am-icon-reply"></i></dd>
							</dl>
							<div class="myArticleCommentListText">
							</div>
						</li>
						<li>
							<dl class="myArticleCommentListLeft">
								<dt><img class="userimg" src="" alt=""></dt>
								<dd>
									<span class="username"></span>
									<i class="time"></i>
								</dd>
							</dl>
							<dl id="" class="myArticleCommentListRight">
								<dt><i class="am-icon-heart-o zan" style="color:#BCC0C8;"></i><span id="" class="num"></span></dt>
								<dd><i class="am-icon-reply"></i></dd>
							</dl>
							<div class="myArticleCommentListText">
							</div>
						</li>
						<li>
							<dl class="myArticleCommentListLeft">
								<dt><img class="userimg" src="" alt=""></dt>
								<dd>
									<span class="username"></span>
									<i class="time"></i>
								</dd>
							</dl>
							<dl id="" class="myArticleCommentListRight">
								<dt><i class="am-icon-heart-o zan" style="color:#BCC0C8;"></i><span class="num"></span></dt>
								<dd><i class="am-icon-reply"></i></dd>
							</dl>
							<div class="myArticleCommentListText">
							</div>
						</li>
						<li>
							<dl class="myArticleCommentListLeft">
								<dt><img class="userimg" src="" alt=""></dt>
								<dd>
									<span class="username"></span>
									<i class="time"></i>
								</dd>
							</dl>
							<dl id="" class="myArticleCommentListRight">
								<dt><i class="am-icon-heart-o zan" style="color:#BCC0C8;"></i><span class="num"></span></dt>
								<dd><i class="am-icon-reply"></i></dd>
							</dl>
							<div class="myArticleCommentListText">
							</div>
						</li>
						<li>
							<dl class="myArticleCommentListLeft">
								<dt><img class="userimg" src="" alt=""></dt>
								<dd>
									<span class="username"></span>
									<i class="time"></i>
								</dd>
							</dl>
							<dl id="" class="myArticleCommentListRight">
								<dt><i class="am-icon-heart-o zan" style="color:#BCC0C8;"></i><span class="num"></span></dt>
								<dd><i class="am-icon-reply"></i></dd>
							</dl>
							<div class="myArticleCommentListText">
							</div>
						</li>
					</ul>
				</div>
			</div>
			<button id="send" style="width:90%;position:fixed;bottom: 0px;left: 5%;height:40px;display: none;">发送</button>
		</div>
		<!--[if (gte IE 9)|!(IE)]><!-->
		<script src="js/jquery.min.js"></script>
		<!--<![endif]-->
		<!--[if lte IE 8 ]>
<script src="http://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>
<script src="http://cdn.staticfile.org/modernizr/2.8.3/modernizr.js"></script>
<script src="assets/js/amazeui.ie8polyfill.min.js"></script>
<![endif]-->
		<script src="js/amazeui.min.js"></script>
		<script src="js/app.js"></script>
		<script type="text/javascript">
			$(function() {
				$zanarr = $(".num");
				$pinglunid = $(".myArticleCommentListRight");
				$usernamearr = $(".username");
				$usercontent = $(".myArticleCommentListText");
				$userimgarr = $(".userimg");
				$time1 = $(".time");
				$loc = location.href;
				$n1 = $loc.length; //地址的总长度
				$n2 = $loc.indexOf("="); //取得=号的位置
				$thistitle = $loc.substr($n2 + 1, $n1 - $n2); //从=号后面的内容
				$id = null;
				
				
					
				//从数据库获取这篇新闻文章的标题，作者,内容,内容图片，作者头像,和文章id
				if(isNaN($thistitle)) {
					$.ajax({
						type: "get",
						url: "http://127.0.0.1/news/luntu.php",
						async: true,
						dataType: "json",
						data: {
							img: $thistitle
						},
						success: function(xhr) {
							$("#touxiangimg").attr('src', xhr[0].author_img);
							$(".myArticleName").text(xhr[0].author);
							$(".myArticleTitle").text(xhr[0].Title);
							$(".myArticlecontent").text(xhr[0].content);
							$(".myArticleTime").text(xhr[0].news_time);
							$id = xhr[0].id;
							$("#contentimg").attr('src', xhr[0].img);
						}
					});
				} else {
					$.ajax({
						type: "get",
						url: "http://127.0.0.1/news/news_details.php",
						async: true,
						dataType: "json",
						data: {
							$id: $thistitle
						},
						success: function(xhr) {
							$("#touxiangimg").attr('src', xhr[0].author_img);
							$(".myArticleName").text(xhr[0].author);
							$(".myArticleTitle").text(xhr[0].Title);
							$(".myArticlecontent").text(xhr[0].content);
							$id = xhr[0].id;
							$(".myArticleTime").text(xhr[0].news_time);
							$("#contentimg").attr('src', xhr[0].img);
						}
					});
				}

				$("body").on("click",".commentShow", function() {

					//获取数据库最新的评论

					$.ajax({

						type: "get",
						url: "commentselect.php",
						async: true,
						dataType: "json",
						data: {
							list_id: $id
						},
						success: function(xhr) {
							$(xhr).each(function(i, v) {

								$usernamearr.eq(i).text(v.comment_name);
								$usercontent.eq(i).text(v.comment);
								$userimgarr.eq(i).attr('src', v.comment_img);
								$time1.eq(i).text(v.time);
								$pinglunid.eq(i).attr('id', v.id);
							})
						}

					});

					//查询点赞中的用户id，有的话就是点过了
					$.ajax({
						type: "get",
						url: "http://127.0.0.1/news/zanshuselect.php",
						async: true,
						dataType: "json",
						success: function(xhr) {
							$(xhr).each(function(x, y) {
								$("#" + y.comment_id).find(".zan").css("color", "#e87151");
							})
						}
					});

					//点击页面也能获取最新的值
					$.ajax({
						type: "get",
						url: "http://127.0.0.1/news/Fabulousselect.php",
						async: true,
						dataType: "json",
						data: {
							list_id: $id
						},
						success: function(data) {
							$(data).each(function(a, b) {
								$zanarr.eq(a).text(b.Fabulous);
							}) 
						}

					});

					$.ajax({

						type: "get",
						url: "http://127.0.0.1/news/user_img.php",
						async: true,
						dataType: "json",
						success: function(xhr) {
							$("#usertouxiang").attr('src', xhr[0].touxiang_img);
						}
					});

				})

				//写评论
				$("#content").on("click", function() {
					$("#send").fadeIn();
				});
				$("#content").on("blur", function() {
					$("#send").fadeOut();
				});

				$("#send").on("click", function() {
					var d = new Date();
					var str = '';
					str += d.getFullYear() + '-';
					str += d.getMonth() + 1 + '-';
					str += d.getDate() + "  ";
					str += d.getHours() + ':';
					str += d.getMinutes();

					$.ajax({
						type: "get",
						url: "comment.php",
						async: true,
						dataType: "json",
						data: {
							comment: $("#content").val(),
							time: str,
							list_id: $id
						},
					});
					if($("#content").val() == "") {
						alert("请输入内容!");
					} else {
						alert("评论成功!");
					}
					$("#content").val("");
					$(this).fadeOut();
				});

				//点赞并获取数据库最新的值
				var n=1;
				$(".zan").on("click", function() {
					$pingid = $(this).parent().parent().attr('id');
					$color = $(this).css("color");
					
                     //插入点赞数据
					

					//获取点赞的爱心颜色 ，判断一下颜色。
					
					if($color == "rgb(188, 192, 200)") {
                        
						$commentid = $(this).parent().parent().attr('id');
						$num = $(this).parent().find("span").text();
						$num = parseInt($num) + 1;
						console.log($num);
						$(this).parent().find("span").text($num);
						$.ajax({
							type: "get",
							url: "Fabulous.php",
							async: true,
							dataType: "json",
							data: {
								id: $commentid,
								Fabulous: $num
							}
						});
						$(this).css("color", "rgb(232,113,81)");
					}else if($(this).css("color") == 'rgb(232, 113, 81)'){
						
						$commentid = $(this).parent().parent().attr('id');
						$num1 = $(this).parent().find("span").text();
						$num1 = parseInt($num1) - 1;
						console.log($num1);
						$(this).parent().find("span").text($num1);
						$.ajax({
							type: "post",
							url: "quxaiozan.php",
							async: true,
							dataType: "json",
							data: {
								id: $commentid,
								Fabulous: $num1
							}
						});
						$(this).css("color","rgb(188, 192, 200)");
					}
				});

				//加载时先隐藏评论
				$(".myArticleCommentList").css("display", "none");
				//显示/隐藏评论
				$(".commentShow").on("click", function() {
					$(".myArticleCommentList").slideToggle(200);
				});

				//回到新闻列表
				$(".myArticGoBack").on("click", function() {
					window.history.back(-1);
				});
			})
		</script>
	</body>

</html>